//登录注册页面的相关功能
//验证输入框
const form = layui.form;
form.verify({
  username: [/^[a-z0-9]{6,10}$/, "账号名是6到10位由数字，小写字母组成"],
  password: [/^[\S]{6,10}$/, "密码是6到10位,不能有空格"],
  repwd: function (value) {
    return $(".pwd").val() !== value && "两次密码不相同";
  },
});

//注册-提交
// 整个项目都不适用form标签自带的提交效果和功能, 我们要阻拦form的submit事件, 自己用Ajax来提交form标签里所有表单的name属性和value属性的值
// `注意`     后台要key=value&key=value字符串
$("#register .layui-form").on("submit", (e) => {
  e.preventDefault();
  var data = {
    username: $("#register input[name=username]").val(),
    password: $("#register input[name=password]").val(),
  };

  let arr = [];
  for (const key in data) {
    arr.push(`${key}=${data[key]}`);
  }
  arr = arr.join("&");
  console.log(arr);
  axios({
    method: "POST",
    url: "http://api-breakingnews-web.itheima.net/api/reguser",
    data: arr,
  }).then((res) => {
    console.log(res);
    const { status, message } = res.data;
    layer.msg(message);
    // console.log(res.data);
    if (status === 0) {
      $("#register").css("display", "none");
    }
  });
});

$("#login .layui-form").on("submit", (e) => {
  e.preventDefault();
  var data = {
    username: $("#login input[name=username]").val(),
    password: $("#login input[name=password]").val(),
  };

  let arr = [];
  for (const key in data) {
    arr.push(`${key}=${data[key]}`);
  }
  arr = arr.join("&");
  console.log(arr);
  axios({
    method: "POST",
    url: "http://api-breakingnews-web.itheima.net/api/login",
    data: arr,
  }).then((res) => {
    console.log(res);
    const { status, message } = res.data;
    layer.msg(message);
    if (status === 0) {
      window.location.href = "./index.html";
    }
  });
});

// 1. 注册/登录 表单 切换

//去注册，绑定点击事件
//es6箭头函数
$("#goto-register").on("click", (e) => {
  $("#register").stop().show();
});
// $("#goto-register").on("click", function () {
//   $("#register").css("display", "block");
// });

//去登录，绑定点击事件
$("#goto-login").on("click", function () {
  $("#register").css("display", "none");
});
